<template>
  <div :id="`dplayer${id}`" class="hide-player-dom"></div>
</template>

<script>
export default {
  data() {
    return {
      player: null,
      SrsRtc: null,
      options: null,
      player: null,
      id: this.uid + Math.random(),
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initPlayer(this.url);
    });
  },
  beforeDestroy() {
    this.player && this.player.destroy();
  },
  props: {
    url: String,
    uid: String,
  },
  methods: {
    initPlayer(url) {
      console.log(url, "传参");
      // mp4 / webrtc
      this.options = {
        container: document.getElementById(`dplayer${this.id}`), // 播放器容器
        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
        theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: "auto", // 自动预加载
        volume: 0.7, // 初始化音量
        autoplay: true,
        video: {
          // url: "webrtc://192.168.5.83/live/dep10", // 播放视频的路径
          url, // 播放视频的路径
          // pic: "@/assets/images/image_mingshi_bg3.png",
        },
      };
      const dplayer = window.DPlayer;
      // this.player.swichVideo({ url }); //切换只能用这个方式，不能直接修改options
      this.player = new dplayer(this.options);

      //监听错误
      this.player.on("error", this.onerror);

      //能否播放
      this.player.on("canplay", this.oncanplay);

      //播放时出现错误
      this.player.on("emptied", this.onemptied);
    },

    onerror(err) {
      console.log(err, "onerror");
    },
    oncanplay(canplay) {
      console.log(canplay, "oncanplay");
    },
    onemptied(emptied) {
      console.log(emptied, "emptied");
    },
  },
};
</script>

<style lang='scss'>
.hide-player-dom {
  width: 100%;
  height: 100%;
  .dplayer-menu,
  .dplayer-setting,
  .dplayer-bar-wrap,
  .dplayer-time-divider,
  .dplayer-time-dtime {
    display: none !important;
  }
}
</style>